/* eslint-disable no-console */
import React, { FC, useMemo } from 'react';
import { connect } from 'dva';
import PageHeaderWrapper from 'hzero-boot/lib/components/Page';
import { Anchor, Row, Col, Button, Switch } from 'choerodon-ui';
import { DataSet, Table, Select } from 'choerodon-ui/pro';
import { ColumnAlign, ColumnLock } from 'choerodon-ui/pro/lib/table/enum';
import HeaderCollapse from './components/HeaderCollapse';
import MediaItem from './components/MediaItem';
import UploadItem from './components/UploadItem';
import styles from './style.less';
import basicDS from './basicDataSet';
import skuDS from './skuDataSet';
import typesDS from './typesDataSet';

const { Link } = Anchor;
const { Column } = Table;
const { Option } = Select;

const basic = [
  [
    { key: '渠道', value: '京东' },
    { key: '店铺', value: '京东' },
    { key: '品牌', value: '海天' },
  ],
  [
    { key: '商品编号', value: '1000004' },
    { key: '商品名称', value: '草莓物语' },
    { key: '生效状态', value: true, type: 'switch' },
  ],
  [
    { key: '外部商品编码', value: '100004' },
    { key: '外部标题', value: '京东', type: 'textFiled' },
    { key: '是否支持配送', value: true, type: 'switch' },
  ],
  [
    { key: '审核状态', value: '待审核' },
    { key: '发布状态', value: '待发布' },
    { key: '是否支持自提', value: false, type: 'switch' },
  ],
  [
    { key: '上下架状态', value: '待上架' },
    { key: '上架时间', value: '2020-08-01' },
    { key: '下架时间', value: '2020-10-03' },
  ],
];

export interface GoodsProps {
  dispatch: any;
}

const Goods: FC<GoodsProps> = () => {

  const userDs = useMemo(() => new DataSet(basicDS()), []);
  const skuDs = useMemo(() => new DataSet(skuDS()), []);
  const typeDs = useMemo(() => new DataSet(typesDS()), []);

  const handleEdit = (record: any) => {
    record.setState('editing', true);
  };
  const handleAdd = () => {
    const record = userDs.create({}, 0);
    record.setState('editing', true);
  };
  const handleCancel = (record: any) => {
    if (record.status === 'add') {
      userDs.remove(record);
    } else {
      record.reset();
      record.setState('editing', false);
    }
  };

  const handleSubmit = async () => {
    const res = await userDs.submit();
    // 对应抛出处理
    console.log(res);
  };

  const commands = ({ record }: any) => {
    const btns = [] as any;
    if (record.getState('editing')) {
      btns.push(
        <a onClick={handleSubmit}>确认</a>,
        <a onClick={() => handleCancel(record)}>取消</a>
      );
    } else {
      btns.push(
        <a
          onClick={() => handleEdit(record)}
          // disabled={record.status === 'delete'}
        >
          编辑
        </a>
      );
    }
    return [<span className="action-link">{btns}</span>];
  };

  const statusRender = ({ record }: any) => {
    if (!record.getState('editing')) {
      if (record.get('productStatus')) {
        return <span className={styles['status-ok']}>有效</span>;
      } else {
        return <span className={styles['status-unok']}>失效</span>;
      }
    }

    return null;
  };

  return (
    <PageHeaderWrapper
      title="主数据商品详情"
      headerProps={{
        backPath: '/path',
      }}
      header={<Button type="primary">同步</Button>}
    >
      <div className={styles['goods-content']}>
        <div className={styles['goods-left']}>
          <HeaderCollapse title="基本信息" id="Basic">
            {basic.map(item => {
              return (
                <Row align="middle" className={styles['basic-row']}>
                  {item.map(newItem => {
                    return (
                      <Col span={8}>
                        <div className={styles['basic-col']}>
                          <span>{newItem.key}:</span>
                          {newItem.type === 'switch' ? (
                            <Switch
                              className={styles['basic-value']}
                              checked={newItem.value as boolean}
                              disabled
                            />
                          ) : (
                            <span className={styles['basic-value']}>{newItem.value}</span>
                          )}
                        </div>
                      </Col>
                    );
                  })}
                </Row>
              );
            })}
          </HeaderCollapse>

          <HeaderCollapse title="平台属性" id="Platform">
            <div className={styles.platforms}>
              <div className={styles['table-buttons']}>
                <Button icon="add" onClick={handleAdd}>
                  新建
                </Button>
                <Button icon="delete" style={{ marginLeft: 8 }}>
                  删除
                </Button>
              </div>
              <div className={styles['platform-table']}>
                <Table key="platforms" dataSet={userDs} border={false} pagination={false}>
                  <Column name="numberid" />
                  <Column name="name" editor={record => record.getState('editing')} />
                  <Column name="nameValue" editor={record => record.getState('editing')} />
                  <Column
                    header="操作"
                    align={'center' as ColumnAlign}
                    renderer={commands}
                    className="custom-command"
                    lock={'right' as ColumnLock}
                  />
                </Table>
              </div>
            </div>
          </HeaderCollapse>

          <HeaderCollapse title="SKU商品" id="SKU">
            <div className={styles.platforms}>
              <div className={styles['table-buttons']}>
                <Button icon="edit" onClick={handleAdd}>
                  批量编辑
                </Button>
                <Button icon="save" style={{ marginLeft: 8 }}>
                  保存
                </Button>
              </div>
              <div className={styles['platform-table']}>
                <Table key="platforms" dataSet={skuDs} border={false} pagination={false}>
                  <Column name="numberid" />
                  <Column name="name" editor={record => record.getState('editing')} />
                  <Column name="code" editor={record => record.getState('editing')} />
                  <Column name="productCode" editor={record => record.getState('editing')} />
                  <Column name="productName" editor={record => record.getState('editing')} />
                  <Column
                    name="productStatus"
                    renderer={statusRender}
                    editor={record => record.getState('editing')}
                  />
                  <Column name="color" editor={record => record.getState('editing')} />
                  <Column name="size" editor={record => record.getState('editing')} />
                  <Column name="type" editor={record => record.getState('editing')} />
                  <Column
                    header="操作"
                    align={'center' as ColumnAlign}
                    renderer={commands}
                    className="custom-command"
                    lock={'right' as ColumnLock}
                  />
                </Table>
              </div>
            </div>
          </HeaderCollapse>

          <HeaderCollapse title="类别" id="Types">
            <div className={styles.platforms}>
              <div className={styles['platform-table']}>
                <Table key="platforms" dataSet={typeDs} border={false} pagination={false}>
                  <Column name="numberid" />
                  <Column name="typeCode" />
                  <Column name="typeName" />
                </Table>
              </div>
            </div>
          </HeaderCollapse>

          <HeaderCollapse title="多媒体" id="Medias">
            <div className={styles.media}>
              <MediaItem label="语种">
                <Select defaultValue="zh-CN">
                  <Option value="zh-CN">简体中文</Option>
                  <Option value="en-US">美式英语</Option>
                </Select>
              </MediaItem>
              <MediaItem label="主图">
                <UploadItem />
              </MediaItem>
              <MediaItem label="详情图">
                <UploadItem />
              </MediaItem>
              <MediaItem label="缩略图">
                <UploadItem />
              </MediaItem>
            </div>
          </HeaderCollapse>
        </div>
        <div className={styles['goods-right']}>
          <div style={{ padding: 20 }}>
            <Anchor affix={false}>
              <Link href="#Basic" title="基本信息" />
              <Link href="#Platform" title="平台属性" />
              <Link href="#SKU" title="SKU商品" />
              <Link href="#Types" title="类别" />
              <Link href="#Medias" title="多媒体" />
            </Anchor>
          </div>
        </div>
      </div>
    </PageHeaderWrapper>
  );
};

export default connect(
  ({ goods }: { goods: any }) =>
    ({
      goods,
    } as any)
)(Goods);
